<template>
  <!--  eslint-disable vue/no-v-html  -->
  <div class="select-search" @click.stop>
    <div @click="editShowList">
      <el-input
        v-model="text"
        readonly
        :suffix-icon="showList ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        :placeholder="placeholder"
        class="showList"
      />
    </div>
    <transition name="el-zoom-in-top">
      <div v-if="showList" class="select-content">
        <el-input
          ref="seachInput"
          v-model="searchText"
          placeholder="请输入关键字搜索"
          class="input-with-select"
          suffix-icon="el-icon-search"
          @input="changeSearch"
        />
        <div>
          <ul class="result-list">
            <li
              v-for="item in filteredOptions"
              :key="item.id"
              :class="{'result-item': true}"
              @click="onSelect(item)"
            >
              <template v-if="searchText">
                <!-- eslint-disable-next-line vue/no-v-html -->
                <span
                  v-html="item.content.replace(searchText, `<span v-html class='selected'>${searchText} </span>`)"
                />
                <el-tag v-if="item.customerType === COMPANYTYPE" effect="plain">
                  个人
                </el-tag>
              </template>
              <span v-else>{{ item.content }} <el-tag v-if="item.customerType === COMPANYTYPE" effect="plain">个人</el-tag></span>
            </li>
          </ul>
        </div>
      </div>
    </transition>
    <slot name="describe" />
  </div>
</template>

<script>
import _ from 'lodash';

const COMPANYTYPE = '个人';
export default {
  name: 'SelectSearch',
  props: {
    list: {
      type: Array,
      default: () => ([]),
    },
    text: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    icon: {
      type: Boolean,
      default: false,
    },

  },
  data() {
    this.changeSearch = _.debounce(this.changeSearch, 800);
    return {
      showList: false,
      searchText: '',
      COMPANYTYPE,
    };
  },
  computed: {
    filteredOptions() {
      return this.list.filter((item) => item.content.indexOf(this.searchText) > -1);
    },
  },
  mounted() {
    window.addEventListener('click', () => {
      this.showList = false;
    });
  },
  methods: {
    changeSearch(val) {
      this.$emit('changeSearch', val);
    },
    editShowList() {
      this.showList = !this.showList;
      if (this.showList) {
        this.searchText = '';
        this.$nextTick(() => {
          this.$refs.seachInput.focus();
        });
      }
    },
    onSelect(item) {
      this.editShowList();
      this.$emit('onSelect', item);
    },
  },
};
</script>
<style lang="scss" scoped>
.select-search {
  position: relative;
  .describe {
    color: #999999;
    font-size: 12px;
    line-height: 24px;
    margin-left: 10px;
  }
  .select-content {
    border: 1px solid #d9d9d9;
    height: 200px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 100;
    .input-with-select ::v-deep {
      .el-input__inner {
        background-color: #f6f6f6;
        border: none;
      }
    }
    .result-list {
      padding: 0;
      margin: 0;
      border-radius: 5px;
      border-top: none;
      max-height: 200px;
      line-height: 2rem;
      li {
        list-style: none;
        padding-left: 10px;
      }
      li:hover {
        background:#dff7eb;
      }
      .detailed-address {
        margin-left: 10px;
      }
    }
  }
}
.select-search ::v-deep {
  .is-disabled {
    .el-input__inner {
      background: #fff;
      color: rgba(0,0,0,.6);
    }
  }
}
</style>
<style >
.selected {
  color: #06B880;
}
</style>
